<template>
	<view class="container">
		<u-navbar style="position: fixed;z-index: 10000;" :custom-back="back" :border-bottom="false" back-text="取消" :is-fixed="true" title="登录" :background="{ backgroundColor: 'rgba(255,255,255,0)' }" title-color="#000"><!--  --></u-navbar>
		<view class="login-album" :style="{ height: ablumHeight + 'px' }"><image :style="{ height: ablumHeight + 'px' }" class="login-album-image" :src="adv.wechat_adv" mode="aspectFill"></image></view>
		<view class="login-action">
			<!-- #ifdef MP-WEIXIN -->
			<button class="button-none" open-type="getUserInfo" @getuserinfo="getWxappUserInfo"><view class="login-action-btn login-action-member">小程序登录</view></button>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="login-action-btn login-action-member" @tap="toMemberLoginPage">公众号授权</view>
			<!-- #endif -->
			<!-- <view class="login-action-btn login-action-matchmaker" @tap="toMatchmakerLoginPage"><text class="login-action-text">红娘登录</text></view> -->
			<view class="login-action-tips">
				点击登录即代表同意
				<text @tap.stop="toAgreePage(0)" :data-index="0">用户协议</text>
				和
				<text @tap.stop="toAgreePage(4)" :data-index="4">隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import AgreemenType from '@/utils/enum/AgreemenType.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			ablumHeight: null,
			agreemenType: AgreemenType
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.ablumHeight = systemInfo.windowHeight - uni.upx2px(265);
		// #ifdef MP-WEIXIN
		uni.login({
			provider: 'weixin',
			success: result => {}
		});
		// #endif
		// #ifdef APP-PLUS
		this.redirectTo({
			url: '/pageUser/login/member'
		});
		// #endif
	},
	computed:{
		...mapState({
		
			adv: state => state.cache.adv
		}),
	},
	methods: {
		back() {
			this.navigateBack();
		},
		toAgreePage(index) {
			this.navigateTo({
				url: this.$u.api.openAgreementPage(this.agreemenType[index].value)
			});
		},
		toMatchmakerLoginPage() {
			this.navigateTo({ url: '/pageUser/login/matchmaker' });
		},
		// #ifndef MP-WEIXIN
		toMemberLoginPage() {
			if (Tools.isWechat()) {
				this.$u.api.linkWechatLogin('/pageOAuth/h5/wechat?identity=10');
			} else {
				this.navigateTo({ url: '/pageUser/login/member?identity=10' });
			}
		},
		// #endif
		// #ifdef MP-WEIXIN
		getWxappUserInfo(e) {
			const { encryptedData, iv } = e.detail;
			this.navigateTo({
				url: '/pageOAuth/mp/wxapp?iv=' + iv + '&encryptedData=' + encryptedData + '&identity=10'
			});
		}
		// #endif
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.login-album {
	width: 750rpx;
	.login-album-image {
		width: 100%;
	}
}
.login-action {
	height: 265rpx;
	display: flex;
	align-items: center;
	flex-direction: column;
	.login-action-btn {
		color: #fff;
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		letter-spacing: 10rpx;
	}
	.login-action-member {
		margin-top: 66rpx;
		background: linear-gradient(270deg, rgba(241, 100, 72, 1) 0%, rgba(250, 86, 106, 1) 63%, rgba(255, 77, 126, 1) 100%);
		border: 1rpx solid rgba(151, 151, 151, 1);
	}
	.login-action-matchmaker {
		margin-top: 35rpx;
		border: #ff4d7e 3rpx solid;
		color: rgba(255, 77, 126, 1);
		background: linear-gradient(180deg, rgba(255, 77, 126, 1), rgba(241, 100, 72, 1));
		&::after {
			content: '';
			display: block;
			position: absolute;
			left: 2rpx;
			right: 2rpx;
			top: 2rpx;
			bottom: 2rpx;
			background: #fff;
			border-radius: 40rpx;
		}
		.login-action-text {
			color: rgba(255, 255, 255, 1);
			letter-spacing: 10rpx;
			background: linear-gradient(180deg, rgba(255, 77, 126, 1) 0%, rgba(241, 100, 72, 1) 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			z-index: 20;
		}
	}
}
.login-action-tips {
	height: 29rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(151, 151, 151, 1);
	line-height: 24rpx;
	letter-spacing: 1rpx;
	margin-top: 70rpx;
	text {
		padding: 0 6rpx;
		color: rgba(255, 77, 126, 1);
	}
}
</style>
